<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_dfj23uc6z9o.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
	</head>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left width100 flex">
								<div style="width: auto;" class="col-md-4 nav-tab-box padding-0 layui-form">
									<select name="interest" lay-filter="fkzh">
										<option value=""></option>
										<option value="0" selected="">全部付款账号</option>
										<option value="1">现金</option>
										<option value="2">中国工商银行 ****5093</option>
										<option value="3">中国建设银行深圳市中旅公馆支行**8420</option>
									</select>
								</div>
								<div class="col-md-4 flex"><i class="iconfont icon-riqi"></i><input type="text" class="layui-input" id="test10" placeholder=" - "></div>
								<div class="col-md-4 padding-0 flex">
									<i class="iconfont icon-search"></i>
									<input type="text" class="layui-input secrh" placeholder="请输入订单号/经销商名称" value="" />
									<span class="gjss" style="visibility: hidden;" title="点击进行高级搜索">高级搜索</span>
								</div>
							</div>
							<div class="heard-right col-md-4 padding-0 flex">
								<button @click="showZjorder" type="button">新增</button>
							</div>
						</div>
					</nav>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-skd" lay-filter="test"></table>
					</div>
				</div>
			</div>
			
			<!-- 新增付款单 -->
			<div class="order hidden import-order zj-order">
				<div class="title">新增收款单</div>
				<form class="layui-form">
					<div class="order-box flex">
						<div class="order-item">
							<div class="item-box skf flex">
								<div>收款方</div>
								<input type="text" value="经销商" disabled class="layui-input">
								<input type="text" class="layui-input">
							</div>
							<div class="item-box flex">
								<div>付款金额</div>
								<input type="text" class="layui-input">
							</div>
							<div class="item-box flex">
								<div>付款日期</div>
								<input type="text" id="FuKuanTime" class="layui-input">
							</div>
							<div class="item-box flex">
								<div style="width: 20%;">付款方式</div>
								<div style="width: 100%;padding: 0;text-align: left;">
									<input type="radio" lay-filter="radio" name="fukuan" value="1" title="现金" class="layui-input">
									<input type="radio" lay-filter="radio" name="fukuan" value="2" title="银行转账" class="layui-input">
								</div>
							</div>
							<div :class="{hidden:FKFS}" class="item-box flex">
								<div>付款账号</div>
								<div style="width: 100%;padding: 0;text-align: left;">
									<select name="interest" lay-filter="fkzh">
										<option value=""></option>
										<option value="1">中国建设银行深圳市中旅公馆支行**8420</option>
									</select>
								</div>
							</div>
							<div class="item-box flex">
								<div>单号</div>
								<input type="text" class="layui-input">
							</div>
						</div>
						<div class="order-item">
							<div class="item-box flex">
								<div>经办人</div>
								<input type="text" class="layui-input">
							</div>
							<div class="item-box flex">
								<div>制单人</div>
								<input type="text" disabled value="陈经理" class="layui-input">
							</div>
							<div class="item-box flex">
								<div>备注</div>
								<textarea  type="text" class="layui-textarea"></textarea>
							</div>
							<div class="item-box flex">
								<div style="width: 20%;">附件</div>
								<div style="width: 100%; flex-wrap: wrap;" class="flex">
									<div class="uploadFiles"><input accept=".png,.jpg,.jpeg,.doc,.docx,.xls,.xlsx,.txt"  @change="changeFile($event)" type="file" class="layui-input"><i class="iconfont icon-shangchuan"> 上传附件</i></div>
									<div style="width: 70%;padding-left: 10px;box-sizing: border-box;text-align: left;">
										建议上传订单付款凭证，如汇款单等；附件支持JPG\PNG\Word\Excel\Txt格式，大小不超过4M
									</div>
									<div v-if="fileName != ''" class="fileName" style="width: 100%;">
										<span class="name">{{fileName}}</span>
										<span @click="removeFiles" class="iconfont icon-guanbi"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="add-btn">
						<button @click="showZjorder" type="button" class="cancel">取消</button>
						<button type="button" class="confirm">保存</button>
					</div>
				</form>
			</div>
			
		</div>
		
		
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="xiangqing">详情</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="xiangqing">作废</a>
		</script>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			
			var vm = new Vue({
				el:".container-fluid",
				data:{
					FKFS:true,//付款方式,false 显示输入银行账号输入框
					FuKuanFangShi:0,//付款方式 1为现金 ,2为银行转账
					FilesValue:"",
					fileName:""
				},
				methods:{
					showZjorder(){
						$(".import-order.zj-order").toggleClass('hidden')
					},
					removeFiles(){
						this.fileName = ""
						this.FilesValue = ""
					},
					changeFile(e){//选择文件(附件)
						let Files = e.target.files[0];
						let Size = (Files.size/1024/1024).toFixed(2);
						if(Size < 20){
							$(".fileName>.name").text(Files.name).attr("href",e.target.value)
						}else{
							layer.alert('当前文件大小为：<span style="color:#ff6600;font-size:16px;">'+Size+'M</span><br><span style="color:#2196f3;font-size:15px;">单个文件大小不能超过 20M ！！！</span>');
						}
						
						this.fileName = Files.name
						this.FilesValue = e.target.value
						
						console.log(e.target.value);
						console.log(e.target.files[0]);
					}
				}
			})
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element,
				layer = layui.layer;
				
				//时间范围选择
				laydate.render({
					elem: '#test10',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+" - "+Gather.getTime().YearText,
					format:"yyyy-MM-dd HH:mm",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});	
				
				//日期时间选择器
				laydate.render({ 
					elem: '#FuKuanTime',
					type: 'datetime',
					format:"yyyy-MM-dd HH:mm:ss",
					value:Gather.getTime().value,
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});
				
				//收款账号选择
				form.on('select(skzh)',function(data){
					layer.msg("您当前所选择的是："+data.value)
				})
				
				//付款方式
				form.on('radio(radio)',function(data){
					vm.FuKuanFangShi = data.value
					if(data.value == 1){
						vm.FKFS = true;
					}else{
						vm.FKFS = false
					}
					layer.msg("(测试，正式需删除)您当前所选择的是："+data.value)
				})
				
				
				// 数据列表渲染
				table.render({
					elem: '#order-skd'
					,data:DataArray2// data为数据库查到的数据
					,height: 500
					,cols: [[//以下field字段为为数据库相同,title为字段描述
						{field:'userid', width:180, title: '单号'}
						,{field:'pwd', width:180, title: '支付时间'}
						,{field:'uname', width:180, title: '付款方名称'}
						,{field:'sex', width: 130, title: '支付方式'}
						,{field:'rank', width:130, title: '金额',}
						,{field:'uptime', width:180, title: '收款账户',}
						,{field:'exptime', width:130, title: '摘要',}
						,{field:'money', width:130, title: '状态',}
						,{field:'checkmail', fixed: 'right', width:130, title: '操作', toolbar: '#barDemo',}
					]]
					,page: true
				});
				
				table.on('tool(test)', function(obj){
					
				})
			});
		</script>
	</body>
</html>
